<template>
  <div class="detail-all">

    <van-nav-bar
      title="美容基因结果"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!---------第一部分：一个综合评分加上右边一个头像--------->
    <div class="detail-header">
      <div>
        <span>肤质综合评分：</span>
        <span class="score">{{ score }}</span>
        <span>分</span>
      </div>
      <!--      头像-->
      <div>
        <div class="detail-image">
          <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/>
        </div>
      </div>
    </div>
    <!---------第二部分：分三个模块一个图加两个需求--------->
    <div class="detail-part1">
      <!----图片展示模块-->
      <div>
<!--        <div class="title1">肌肤需求管理方案</div>-->
<!--        <div class="img1">-->
<!--          <img src="../../../assets/images/login/login.jpg" width="200px" height="200px"/>-->
<!--        </div>-->
        <!--        绘制图表！！-->
        <div id="main" style="width: auto;height: 300px;">
        </div>
        <div class="des1">需加强肌肤<span>防晒、祛痘</span>相关保养
        </div>
      </div>
      <!----需求1-->
      <div class="requestpart">
        <van-row type="flex" justify="space-between">
          <van-col span="2"> <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-col>
          <van-col span="5" class="request">防晒需求</van-col>
          <!--隔壁的评分-->
          <van-col span="10" offset="6"><van-rate v-model="value" disabled /></van-col>

        </van-row>
        <!----问题概况-->
        <div class="request-content">{{ request1 }}</div>
        <!----问题解释-->
        <div class="request-des">{{ des1 }}</div>
      </div>
      <!----需求2-->
      <div class="requestpart">
        <van-row type="flex" justify="space-between">
          <van-col span="2"> <img src="../../../assets/images/login/login.jpg" width="30px" height="30px"/></van-col>
          <van-col span="5" class="request">抗皱需求</van-col>
          <!--隔壁的评分-->
          <van-col span="10" offset="6"><van-rate v-model="value" disabled /></van-col>

        </van-row>
        <!----问题概况-->
        <div class="request-content">{{ request1 }}</div>
        <!----问题解释-->
        <div class="request-des">{{ des1 }}</div>
      </div>
    </div>
    <!---------第三部分--------->
    <div class="part2-title">检测结果总览</div>
    <!---------一个卡片分为3个div-------->
    <div class="part2-card">
      <div class="card-title">抗氧化<span>保养需求</span></div>
      <div class="card-score">
        <div class="score-left">
          <div class="score-left1">基因检测得分</div>
          <div class="score-left2">83</div>
        </div>
        <!------右边的按钮------>
        <div class="score-right">
          <van-button round type="primary" @click="seedetail">查看详情</van-button>
        </div>
      </div>
      <div class="card-analyze">
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>抗氧化能力</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素e水平</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素c水平</div>
      </div>
    </div>
    <div class="part2-card">
      <div class="card-title">保湿<span>保养需求</span></div>
      <div class="card-score">
        <div class="score-left">
          <div class="score-left1">基因检测得分</div>
          <div class="score-left2">83</div>
        </div>
        <!------右边的按钮------>
        <div class="score-right">
          <van-button round type="primary" @click="seedetailmoisture">查看详情</van-button>
        </div>
      </div>
      <div class="card-analyze">
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>抗氧化能力</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素e水平</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素c水平</div>
      </div>
    </div>
    <div class="part2-card">
      <div class="card-title">美白<span>保养需求</span></div>
      <div class="card-score">
        <div class="score-left">
          <div class="score-left1">基因检测得分</div>
          <div class="score-left2">83</div>
        </div>
        <!------右边的按钮------>
        <div class="score-right">
          <van-button round type="primary" @click="seedetailwhitening">查看详情</van-button>
        </div>
      </div>
      <div class="card-analyze">
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>抗氧化能力</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素e水平</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素c水平</div>
      </div>
    </div>
    <div class="part2-card">
      <div class="card-title">抗皱<span>保养需求</span></div>
      <div class="card-score">
        <div class="score-left">
          <div class="score-left1">基因检测得分</div>
          <div class="score-left2">83</div>
        </div>
        <!------右边的按钮------>
        <div class="score-right">
          <van-button round type="primary" @click="seedetailwrinkle">查看详情</van-button>
        </div>
      </div>
      <div class="card-analyze">
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>抗氧化能力</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素e水平</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素c水平</div>
      </div>
    </div>
    <div class="part2-card">
      <div class="card-title">防晒<span>保养需求</span></div>
      <div class="card-score">
        <div class="score-left">
          <div class="score-left1">基因检测得分</div>
          <div class="score-left2">83</div>
        </div>
        <!------右边的按钮------>
        <div class="score-right">
          <van-button round type="primary" @click="seedetailsunscreen">查看详情</van-button>
        </div>
      </div>
      <div class="card-analyze">
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>抗氧化能力</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素e水平</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素c水平</div>
      </div>
    </div>
    <div class="part2-card">
      <div class="card-title">祛痘<span>保养需求</span></div>
      <div class="card-score">
        <div class="score-left">
          <div class="score-left1">基因检测得分</div>
          <div class="score-left2">83</div>
        </div>
        <!------右边的按钮------>
        <div class="score-right">
          <van-button round type="primary" @click="seedetailacne">查看详情</van-button>
        </div>
      </div>
      <div class="card-analyze">
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>抗氧化能力</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素e水平</div>
        <div class="analyze-element"><img src="../../../assets/images/login/login.jpg" width="20px" height="20px"/>维生素c水平</div>
      </div>
    </div>
  </div>
</template>


<script>
import { NavBar, Toast, Row, Col, Rate, Button } from 'vant'
// import Chart from 'chart.js'
// import echarts from 'vue-echarts'
import 'echarts/lib/chart/pie'
import echarts from 'echarts'
// import seedetail
export default {
  name: 'detailreport',
  components: {
    [NavBar.name]: NavBar,
    [Row.name]: Row,
    [Col.name]: Col,
    [Rate.name]: Rate,
    [Button.name]: Button
  },
  data () {
    return {
      score: 73,
      value: 4,
      request1: '敏感敏感敏感敏感敏感敏感敏感敏感敏感感敏感敏感感敏感敏感',
      des1: '1.使用物理防晒'
    }
  },
  // 生命周期函数
  async created () {
    await this.getOrders()
  },
  mounted() {
    this.$nextTick(function () {
      this.drawPie('main')
    })
  },
  methods: {
  // 返回上一页的方法
    onClickLeft () {
      this.$router.go(-1)
    },
    seedetail () {
      this.$router.push({ name: 'seedetail'})
    },
    seedetailacne () {
      this.$router.push({ name: 'seedetail-acne'})
    },
    seedetailmoisture () {
      this.$router.push({ name: 'seedetail-moisture'})
    },
    seedetailsunscreen () {
      this.$router.push({ name: 'seedetail-sunscreen'})
    },
    seedetailwhitening () {
      this.$router.push({ name: 'seedetail-whitening'})
    },
    seedetailwrinkle () {
      this.$router.push({ name: 'seedetail-wrinkle'})
    },
    drawPie () {
      let charts = echarts.init(document.getElementById('main'))
      let option = {
        title: {
          // 标题
          text: '肌肤需求管理方案',
          // link: 'https://www.baidu.com',
          // target: 'blank',
          // textAlign: 'left',
        },
        tooltip: {},// 提示层
        legend: {
          data: ['name1']
        },
        radar: {
          name: {
            textStyle: {
              color: '#969799', // 字体颜色
              // backgroundColor: '#999', // 背景色
              borderRadius: 3, // 圆角
              padding: [3, 5] // padding
            }
          },
          center: ['50%', '50%'],
          radius: '60%',
          startAngle: 270,
          indicator: [
            { name: '指标一', max: 300 },
            { name: '指标二', max: 300 },
            { name: '指标三', max: 300 },
            { name: '指标4', max: 300 },
            { name: '指标5', max: 300 },
            { name: '指标6', max: 300 }
          ],
        },
        series: [{
          // name: '',
          type: 'radar',
          data: [{
            // 鼠标碰到之后会显示的值
            value: [300, 200, 20,200,30],
            name: '123'
          }]
        }]
      }
      charts.setOption(option)
    }
}
}
</script>

<style scoped lang="less">
  .detail-all{
    width: 100%;
    height: 100%;
    background-color: #e2e6e536;
    /*头部*/
    .detail-header{
      display: flex;
      justify-content: space-between;
      height: 80px;
      padding: 25px 10px;
      background-color: #1989fa;
      color: white;
      font-size: 17px;
      font-weight: 550;
      border-radius: 0 0 30px 30px;
      .score{
        font-size: 21px;
        margin: 5px;
      }
      .detail-image{
        border-radius: 50px;
      }
    }
    /*肌肤需求管理方案*/
    .detail-part1{
      /*position: absolute;*/
      /*left: 10px;*/
      /*right: 10px;*/
      /*top: 130px;*/
      background-color: white;
      margin: -30px 15px 15px 10px;
      padding: 10px;
      .title1{
        font-size: 17px;
        font-weight: 600;
        padding:10px 10px 50px 10px;
      }
      .img1{
        display: flex;
        justify-content: center;
      }
      .des1{
        margin: 30px 10px;
        padding: 15px 20px 15px 50px;
        color: #969799;
        background-color: #f3f3f3;
        span{
          color: #1989fa;
        }
      }
      /*单个需求模块*/
      .requestpart{
        margin-bottom: 30px;
        /*需求1*/
        .request{
          font-weight: 600;
        }
        /*评分*/
        .van-icon-star:before {
          color: yellow;
        }
        .request-content{
          margin: 20px 0;
          line-height: 25px;
          /*字体之间的间隔*/
          letter-spacing: 1.5px;
        }
        .request-des{
          color: #969799;
        }
      }

    }
    /*检测结果总览*/
    .part2-title{
      margin: 30px 15px;
      font-weight: 600;
      font-size: 20px;
    }
    .part2-card{
      background-color: white;
      margin: 0 15px 15px 10px;
      padding: 20px 10px;
      .card-title{
        font-weight: 600;
        font-size: 18px;
        span{
          color: #969799;
          margin-left: 15px;
          font-weight: 500;
          font-size: 13px;
        }
      }
      .card-score{
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        .score-left{
        }
        .score-left1{
          font-size: 13px;
          color: #969799;
        }
        .score-left2{
          margin: 10px 0;
          color: #1989fa;
          font-size: 25px;
          font-weight: 600;
        }
      }
      .card-analyze{
        padding: 10px;
        background-color: #e2e6e536;
        font-size: 13px;
        display: flex;
        flex-wrap: wrap;
        .analyze-element{
          width: 50%;
          margin-bottom: 10px;
        }
      }
    }
  }

</style>
